<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>卖场</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0 user-scalable=yes">
    <link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/waterfall.css" rel="stylesheet" />
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="js/phonegap.js"></script>
    <script src="js/Oup.Http.URL.js"></script>
    <script src="js/waterfall.js"></script>
    <script src="js/cookie.js"></script>
    <script src="js/config.js"></script>
    <script type="text/javascript">
        var opt = {
            getResource: function (index, render) {
                GetList(render);
            },
            auto_imgHeight: true,
            insert_type: 1,
            column_width: 100,
            column_space: 2
        };
        var pageIndex = 1;
        var isLoading = true;
        var category=0;

        $(document).bind('pageinit', function () {
        	$("a[name='produce']").live("click", function () {
                $('#container').isResize(false);
                $.waterfall.isScroll = false;
                location.href='detail.html?id=' + $(this).attr("val");
            });
            $("#select_typeId").live("change", function () {
                $('#container').html("");
                pageIndex = 1;
                $('#container').isResize(false);
                $.waterfall.isScroll = false;
                GetList(null);
            });
            $(window).bind('scroll', function () {
                if ($("#rq_ProductDetail").length == 0) {
                    $.waterfall.isScroll = true;
                } else {
                    $.waterfall.isScroll = false;
                }
            });
            $("#btnselect").click(function(){
            	location.href="?showCategoryChoose=1&t="+new Date();
            });
    	});
        
        $(function () {
            //GetList(null);
            //GetSelect();
        });
        
        function SetCategoryResult(result){
        	var json=eval("(" + Base64.decode(result) + ")");
        	$("#txtselect").html(json.title);
        	category=json.id;
        	pageIndex=1;
        	GetList(null);
        }

        function GetList(render) {
            if (render != null || pageIndex == 1 && isLoading) {
                isLoading = false;
                $.mobile.showPageLoadingMsg('b', "正在加载");
                $.ajax({
                    type: "get",
                    async: true,
                    url: apihost + "/product/list",
                    dataType: "json",
                    ceche: true,
                    data: { page: pageIndex, cid: category, cut: 1, simg_width: 90 },
                    jsonp: "data",
                    jsonpCallback: "success_jsonpCallback",
                    success: function (json) {
                        if (json.status == 1) {
                            pageIndex++;
                            var result = "";
                            for (var i = 0; i < json.data.length; i++) {
                                var d = json.data[i];
                                result += '<div class="cell">';
                                result += '<a val="' + d.id + '" name="produce" href="#">';
                                //result += '<a href="detail.html?id=' + d.id + '">';
                                result += '<img src="' + d.small_img_url + '" />';
                                //result += '<p class="title">' + d.title + '</p>';
                                //result += '<a data-ajax="true" href="detail.html?id=' + d.id + '"><img src="' + d.small_img_url + '" /><p class="title">' + d.title + '</p></a>';
                                result += '</a></div>';
                            }
                            //alert(result);
                            if (render == null) {
                                $('#container').html(result);
                                $('#container').waterfall(opt);
                            } else {
                                render($(result));
                            }
                            $('#container').isResize(true);
                            isLoading = true;
                        }
                        $.mobile.hidePageLoadingMsg();
                    },
                    error: function () {
                        $.mobile.hidePageLoadingMsg();
                    },
                    complete: function () {
                        //$.mobile.hidePageLoadingMsg();
                    }
                });
            }
        }
        function GetSelect() {
            $.ajax({
                type: "get",
                async: true,
                url: apihost + "/product/cat",
                dataType: "json",
                ceche: true,
                data: { pid: 413 },
                jsonp: "data",//服务端用于接收callback调用的function名的参数
                jsonpCallback: "success_jsonpCallback",//callback的function名称
                success: function (json) {//
                    var option = "<select data-native-menu=\"false\" name=\"\" data-mini=\"true\" data-theme=\"c\" id=\"select_typeId\">";
                    option += "<option value=\"0\">全部</option>";
                    for (var i = 0; i < json.data.length; i++) {
                        var data = json.data[i];
                        option += "<option value=\"" + data.id + "\">" + data.name + "</option>";
                    }
                    option += "</select>";
                    $("#rq_select").html(option);
                    $("#rq_select").trigger('create');
                },
                error: function () {
                }
            });
        }

    </script>
    <style type="text/css">
        #title
        {
            text-align: center;
            color: #006699;
            font-weight: bold;
            font-size: 16px;
            background-color: #CCCCCC;
            margin-top: 5px;
            padding: 12px;
        }

        .title
        {
            font-size: 12px;
        }

        #rq_select
        {
            margin: 0 1%;
            padding: 1px 0;
        }

        #select_typeId-button
        {
            margin-bottom: 1px;
            margin-top: 1px;
        }
    </style>
</head>

<body>
    <div data-role="page" id="page1">
        <div data-theme="b" data-role="header" class="ui-header ui-bar-b" role="banner" data-position="fixed" style="position: fixed; border-width: 0px 0px 1px;">
            <h1 class="ui-title" role="heading" aria-level="1" id="rq_select" style="margin-top: 0px; margin-bottom: 0px;">
				<a id="btnselect" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c" data-icon="arrow-d" data-role="button" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
					<span class="ui-btn-inner ui-btn-corner-all">
						<span id="txtselect" class="ui-btn-text">全部</span>
						<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"> </span>
					</span>
				</a>
            </h1>
        </div>
        <div id="container" role="main" data-role="content">
        </div>
        <div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo" data-position="fixed" style="position: fixed;">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li>
                        <a data-ajax="false" href="index.html" data-theme="b" data-icon="headerbtn6">每日推荐
                        </a>
                    </li>
                    <li>
                        <a data-ajax="false" href="list.html" data-theme="b" data-icon="headerbtn1" class="ui-btn-active">卖场
                        </a>
                    </li>
                    <li>
                        <a data-ajax="false" href="my.html" data-theme="b" data-icon="headerbtn2">我的
                        </a>
                    </li>
                    <li>
                        <a data-ajax="false" href="search.html" data-theme="b" data-icon="headerbtn3">搜索
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
